<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input[value] {
        /*必须是input属性  而且具有value属性值*/
        color: pink;
    }

    input[type=text] {
        /*根据不同的属性的值选择*/
        color: red;
    }

    div[class^=icon] {
        /*选择以icon开头的div类名*/
        color: black;
    }

    section[class$=data] {
        /*选择以data结尾的section类名*/
        color: aqua;
    }

    ul li:first-child {
        /*选择ul里的第一个孩子*/
        background-color: pink;
    }

    ul li:first-of-type {
        background-color: pink;
        /*这个使用跟first-child一模一样*/
        /*同元素用child 不一样用first-of-type*/
    }

    ul li:nth-child(n) {
        /*n可以是数字(代表第n个孩子)，公式(从0开始计算(2n)(2n+1)(-n+5))
        ,关键字(even(偶数),odd(奇数))*/
        /*必须是n不能是其他的字母*/
        /*nth 会把所有孩子排序号*/
        background-color: red;
    }

    ul li:last-child {
        /*选择ul里的最后一个孩子*/
        background-color: pink;
    }

    .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;

    }

    .box1::before {
        content: 'hello';
    }

    .box1::after {
        content: 'world';
    }

    .box2 {
        position: relative;
        width: 200px;
        height: 35px;
        border: 1px solid red;
    }

    /*使用伪类创建字体图标*/
    .box2::after {
        position: absolute;
        right: 10px;
        line-height: 35px;
        content: 'V';
        /*必须要写content*/
    }

    /*把图片变模糊*/
    img {
        /*blur 是一个函数 括号内的值越大越模糊*/
        filter: blur(15px);
    }

    /**/
    .son {
        height: calc(100% - 200px);
        /*保证son永远比父盒子小200px*/
    }
</style>

<body>
    <input type="text" value="">
    <input type="text">
    <input type="password" name="" id="">
    <!-- --------------------------------------------- -->
    <div class="icon1"></div>
    <div class="icon2"></div>
    <div class="icon3"></div>
    <div class="icon4"></div>
    <!-- ------------------------------------------------->
    <section class="icon-data"></section>
    <section class="icon-data"></section>
    <section class="icon-ico"></section>
    <!-- --------------------------------------------- -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <!-- --------------------------------------------- -->
    <div class="box1"></div>
    <!-- 使用伪元素创建字体图标 -->
    <div class="box2"></div>
    <script>
    //CSS新增属性选择器
    //类选择器 伪类选择器 属性选择器 权重都是10 标签选择器权重1
    //结构伪类选择器
    //伪元素选择器  简化html 但是复杂了css（伪元素在文档树找不到 属于行内元素 权重为1）
    // ::before 在元素内部的前面插入内容
    // ::after  在元素内部的后面插入内容
    //---------------------------------------------------------
    //让图像变模糊
    // CSS3滤镜---------->filter：blur(); blur模糊处理 数字越大越模糊
    //------------------------------------------------------------
    // CSS3-----------> calc() 可以让css属性值进行计算
    //------------------------------------------------------

    </script>
</body>

</html>